<template>
  <div id="category">
    <title-bar>
      <h2 slot="center">分类</h2>
    </title-bar>
    <search-bar></search-bar>
    <div id="category-main">
      <div id="main-left">
        <side-bar @getList="getList"></side-bar>
      </div>
      <div id="main-right">
        <img id="title-img" src="../assets/img/titleImage.png" alt="">
        <category-list :goodsInfo="goodsList"></category-list>
      </div>
    </div>
    
  </div>
</template>

<script>
import SearchBar from '../components/common/search_bar/SearchBar.vue'
import TitleBar from '../components/common/title_bar/TitleBar.vue'
import SideBar from '../components/categoryChildren/SideBar'
import CategoryList from '../components/categoryChildren/CategoryList.vue'
export default {
  components: { TitleBar, SearchBar, SideBar, CategoryList },
  name:"Category",
  methods:{
    getList(d){
      console.log(d)
     this.goodsList = d
    }
  },
  data() {
    return {
      goodsList:[]
    }
  },
  // directives:{
  //   'postion':{
  //     inserted:(el,binding)=>{

  //     }
  //   }
  // }
}
</script>

<style soped>
  #category-main{
    display: flex;
  }
  #main-left{
    flex: 1;
  }
  #main-right{
    flex: 3;
    height: calc(100vh - 164px);
    overflow: scroll;
  }
  #main-right::-webkit-scrollbar{
    width: 0px;
  }
  #main-right #title-img{
    width: 100%;
  }
</style>